<template>
  <div class="app_container">
    <div class="w_top flex_row">
      <div class="box flex_col cols_16 m_r_20 bg_white">
        <div class="title flex_row ai_cen">
          <img src="./images/kszd.png" />
          <span class="m_l_15 p_t_3">客商主档</span>
        </div>
        <div class="content flex_row m_t_20">
          <div class="flex_col ai_cen cols_8 border_r">
            <span>档案总量</span>
            <span class="m_t_15">34,590</span>
          </div>
          <div class="flex_col ai_cen cols_8 border_r">
            <span>启用数量</span>
            <span class="m_t_15">34,590</span>
          </div>
          <div class="flex_col ai_cen cols_8">
            <span>停用数量</span>
            <span class="m_t_15">34,590</span>
          </div>
        </div>
      </div>
      <div class="cols_8 box bg_white">
        <div class="title flex_row ai_cen">
          <img src="./images/dsdj.png" />
          <span class="m_l_15 p_t_3">待审单据</span>
        </div>
        <div class="content flex_row m_t_20">
          <div class="flex_col ai_cen cols_12 border_r">
            <span>变更单据</span>
            <span class="m_t_15">34,590</span>
          </div>
          <div class="flex_col ai_cen cols_12 ">
            <span>新增单据</span>
            <span class="m_t_15">34,590</span>
          </div>
        </div>
      </div>
    </div>
    <div class="w_middle flex_row jc_spa_bet flex_wrap">
      <div
        class="box flex_col ai_cen m_t_20 ph_30 bg_white"
        v-for="item in middleBoxs"
      >
        <span><img :src="item.imageUrl"/></span>
        <span class="m_t_15">{{ item.name }}</span>
        <span class="m_t_15">{{ item.num }}</span>
      </div>
    </div>
    <div class="w_bottom flex_row m_t_20 bg_white">
      <div class="box cols_6">
        charts
      </div>
      <div class="box cols_6">
        charts
      </div>
      <div class="box cols_6">
        charts
      </div>
      <div class="box cols_6">
        charts
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Dashboard",
  data() {
    return {
      middleBoxs: [
        {
          id: "",
          name: "待审数据",
          imageUrl: require("./images/dssj.png"),
          num: "43"
        },
        {
          id: "",
          name: "昨日审核",
          imageUrl: require("./images/zrsh.png"),
          num: "167"
        },
        {
          id: "",
          name: "本月审核",
          imageUrl: require("./images/bysh.png"),
          num: "24"
        },
        {
          id: "",
          name: "本月日均",
          imageUrl: require("./images/byrj.png"),
          num: "35"
        },
        {
          id: "",
          name: "本年审核",
          imageUrl: require("./images/bnsh.png"),
          num: "1504"
        },
        {
          id: "",
          name: "本年月均",
          imageUrl: require("./images/bnyj.png"),
          num: "35"
        },
        {
          id: "",
          name: "本月驳回",
          imageUrl: require("./images/bybh.png"),
          num: "35"
        },
        {
          id: "",
          name: "本年驳回",
          imageUrl: require("./images/bnbh.png"),
          num: "35"
        }
      ]
    };
  },
  methods: {
    handleCopy(text, event) {}
  }
};
</script>
<style scoped>

.app_container {
  position: relative;
  padding: 20px 30px;
  background-color: #eef1f6;
}

div.w_top .box {
  padding: 30px 20px;
}

div.w_top .box .title > span {
  font-weight: 600;
}

div.w_top .box .content > div > span:first-child {
  color: #a0a0a0;
}

div.w_top .box .content > div > span:last-child {
  font-size: 30px;
  color: #545454;
}

.border_r {
  border-right: 1px solid #dcdcdc;
}

div.w_middle .box {
  width: 24%;
}

div.w_middle .box > span:nth-child(2) {
  color: #a0a0a0;
}

div.w_middle .box > span:last-child {
  font-size: 30px;
  color: #545454;
}

div.w_bottom .box {
  height: 150px;
}
</style>
